{% extends "base.html" %}

{% block title %}文档列表 - AsciiDoc文档平台{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-12">
            <h1 class="mb-4">
                <i class="fas fa-book-open me-2"></i>
                文档列表
            </h1>
            
            <div class="row mb-4">
                <div class="col-md-6">
                    <a href="{{ url_for('upload') }}" class="btn btn-primary">
                        <i class="fas fa-upload me-2"></i>上传新文档
                    </a>
                </div>
                <div class="col-md-6">
                    <div class="input-group">
                        <input type="text" class="form-control" id="searchInput" placeholder="搜索文档...">
                        <button class="btn btn-outline-secondary" type="button" id="searchBtn">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="row" id="documentsContainer">
                {% for doc in documents %}
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">
                                <i class="fas fa-file-alt me-2 text-primary"></i>
                                {{ doc.title }}
                            </h5>
                            <p class="card-text text-muted">
                                {{ doc.description or '暂无描述' }}
                            </p>
                            <p class="card-text">
                                <small class="text-muted">
                                    <i class="fas fa-user me-1"></i>{{ doc.author }}<br>
                                    <i class="fas fa-clock me-1"></i>{{ doc.updated_at[:10] }}
                                </small>
                            </p>
                        </div>
                        <div class="card-footer">
                            <div class="d-flex justify-content-between">
                                <a href="{{ url_for('view_document', doc_id=doc.id) }}" 
                                   class="btn btn-primary btn-sm">
                                    <i class="fas fa-eye me-1"></i>查看
                                </a>
                                <div class="btn-group btn-group-sm">
                                    <button class="btn btn-outline-secondary" 
                                            onclick="exportDocument('{{ doc.id }}', 'html')">
                                        <i class="fas fa-download me-1"></i>HTML
                                    </button>
                                    <button class="btn btn-outline-secondary" 
                                            onclick="exportDocument('{{ doc.id }}', 'pdf')">
                                        <i class="fas fa-file-pdf me-1"></i>PDF
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% else %}
                <div class="col-12">
                    <div class="text-center py-5">
                        <i class="fas fa-folder-open fa-5x text-muted mb-3"></i>
                        <h3 class="text-muted">暂无文档</h3>
                        <p class="text-muted">开始上传您的第一个AsciiDoc文档吧！</p>
                        <a href="{{ url_for('upload') }}" class="btn btn-primary">
                            <i class="fas fa-upload me-2"></i>立即上传
                        </a>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<script>
// 搜索功能
document.getElementById('searchInput').addEventListener('input', function(e) {
    const searchTerm = e.target.value.toLowerCase();
    const cards = document.querySelectorAll('#documentsContainer .col-md-6');
    
    cards.forEach(card => {
        const title = card.querySelector('.card-title').textContent.toLowerCase();
        const description = card.querySelector('.card-text').textContent.toLowerCase();
        
        if (title.includes(searchTerm) || description.includes(searchTerm)) {
            card.style.display = 'block';
        } else {
            card.style.display = searchTerm ? 'none' : 'block';
        }
    });
});

// 导出文档
function exportDocument(docId, format) {
    window.location.href = `/api/document/${docId}/export/${format}`;
}
</script>
{% endblock %}
